<template>
  <div class="FilmDetail">
    <div class="FD-banner">
      <div class="FD-banner-wrap">
        <div class="FD-banner-left">
          <img
            src="https://p1.meituan.net/movie/f6ec2a022d3644ef493f881d359f65303190471.jpg@464w_644h_1e_1c"
            alt=""
          />
        </div>
        <div class="FD-banner-right">
          <div class="FD-banner-msg">
            <p class="name">{{ film.filmName }}</p>
            <p class="ename ellipsis">The End of Endless Love</p>
            <p class="FD-banner-msg-com ellipsis">
              <span>{{ film.sort.sortType }}</span
              >&emsp;
              <!-- <span>青春</span> -->
            </p>
            <p class="FD-banner-msg-com ellipsis">
              <span>中国大陆</span> / <span>{{ film.filmLong }}分钟</span>
            </p>
            <p class="FD-banner-msg-com ellipsis">
              {{ dateFormat("YYYY-mm-dd ", film.filmDate) }}中国大陆上映
            </p>

            <div class="FD-banner-con">
              <div class="want-like-btn" @click="wantLike">
                <i
                  class="el-icon-star-on"
                  :style="{
                    color: wantLikeFlag == 1 ? 'red' : '',
                  }"
                ></i
                >{{ wantLikeMsg }}
              </div>
              <div class="score-btn" @click="scoreEvent">
                <i
                  class="el-icon-star-on"
                  :style="{
                    color: scoreFlag == 1 ? '#F7BA2A' : '',
                  }"
                ></i
                >{{ scoreMsg }}
              </div>
              <div class="buy-btn" @click="toNext">{{ buybtnmsg }}</div>
            </div>
          </div>
          <div class="FD-banner-score">
            <div class="FD-banner-score-title">猫眼口碑</div>
            <div class="score-wrap">
              <div class="score">{{ film.filmTop }}</div>
              <div class="el-score">
                <div class="el-score-1">
                  <el-rate v-model="score" disabled> </el-rate>
                </div>
                <div class="el-score-2">26.8万人评分</div>
              </div>
            </div>
            <div class="FD-banner-score-title">累计票房</div>
            <div><span class="piaofang">3.21</span>亿</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 弹出 评分 对话框 -->
    <div class="score-dialog">
      <el-dialog :visible.sync="dialogVisible" width="40%" :show-close="false">
        <div class="score-dialog-top">
          <Score @getscore="getScore" :scorevalue="scoreValue"></Score>
        </div>
        <div class="score-dialog-bottom">
          <el-form @submit.native.prevent>
            <el-form-item>
              <el-input
                type="textarea"
                v-model="evaluate"
                placeholder="快来说说你的看法吧"
                @input="lenControl"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span>{{ dialogTip }}</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="danger" @click="submitScore">提交</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.FilmDetail {
  .FD-banner {
    height: 370px;
    background: url("https://s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:5788b470/banner_bg.f7fd103e3b8c16b6f449cce43fc57f45.png")
      no-repeat;
    .FD-banner-wrap {
      width: 1200px;
      height: 370px;
      position: relative;
      margin: 0 auto;
      .FD-banner-left {
        width: 232px;
        height: 322px;
        border: 4px solid #fff;
        position: absolute;
        left: 0;
        bottom: -25px;
        background-color: #008cff;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .FD-banner-right {
        position: absolute;
        left: 270px;
        top: 70px;
        color: #fff;
        .FD-banner-msg {
          height: 300px;
          position: relative;
          .name {
            width: 340px;
            font-size: 26px;
            line-height: 32px;
            font-weight: 700;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            max-height: 64px;
          }
          .ename {
            width: 340px;
            font-size: 18px;
            line-height: 1.3;
            margin-bottom: 14px;
          }
          .FD-banner-msg-com {
            margin: 12px 0;
            line-height: 100%;
            color: #fff;
            font-size: 14px;
          }
          .FD-banner-con {
            display: flex;
            align-items: center;
            width: 250px;
            flex-wrap: wrap;
            position: absolute;
            left: 0;
            bottom: 30px;
            div {
              margin-right: 10px;
              width: 115px;
              height: 36px;
              line-height: 36px;
              display: flex;
              justify-content: center;
              align-items: center;
              cursor: pointer;
              background-color: #756189;
              text-align: center;
              font-size: 14px;
              color: #fff;
              border-radius: 2px;
              i {
                font-size: 20px;
                margin-right: 3px;
              }
            }
            .buy-btn {
              width: 250px;
              height: 40px;
              margin-top: 10px;
              color: #fff;
              background-color: #df2d2d;
              user-select: none;
            }
          }
          .ellipsis {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
        }
        .FD-banner-score {
          position: absolute;
          right: -125px;
          bottom: 30px;
          .score-wrap {
            width: 125px;
            height: 32px;
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            .score {
              margin-right: 10px;
              font-size: 30px;
              color: #ffc600;
            }
            .el-score {
              .el-score-1 {
                font-size: 12px;
                .el-rate {
                  width: 100px;
                  display: flex;
                  align-items: center;
                  /deep/ .el-rate__icon {
                    margin-right: 0px;
                  }
                }
              }
              .el-score-2 {
                font-size: 12px;
              }
            }
          }
          .FD-banner-score-title {
            font-size: 12px;
            margin-bottom: 8px;
          }
          .piaofang {
            font-size: 30px;
            font-family: stonefont;
          }
        }
      }
    }
  }
  .score-dialog {
    /deep/ .el-textarea__inner {
      resize: none;
      height: 150px;
      overflow: hidden;
      &:focus {
        border-color: red;
      }
    }
  }
}
</style>
<script>
import $ from "jquery";
import Score from "./Score";
import bus from "../../bus/index";
import filmInfo from "../../model/films";
export default {
  data() {
    return {
      movieList: this.$emit("list"),
    };
  },
  props: ["isxseats", "movieid"],
  data() {
    return {
      id: "", // 电影 id
      score: 3.9, // 电影评分
      wantLikeFlag: 0, // 是否想看
      wantLikeMsg: "想看", // 想看信息
      scoreFlag: 0, // 是否已经评分
      scoreMsg: "评分", // 评分 信息
      scoreValue: null, // 分数(1-5)
      dialogVisible: false, // 评分对话框
      evaluate: "", // 评价
      dialogTip: "", // 评价超出字数提示
      isXseats: false, // 特惠购票 还是 查看更多详情
      buybtnmsg: "", // 按钮上的信息
      film: { sort: {} }, // 接收电影数据
    };
  },

  created() {
    this.id = this.$route.params.id; // 获取当前电影 id
    // console.log(this.id, "00000000");

    filmInfo
      .movieDetails({
        filmId: this.id,
      })
      .then((res) => {
        console.log(res);
        if (res.data.code == "10000") {
          //   console.log(res.data);
          this.film = res.data.data;
          console.log(this.film);
        } else {
          console.log("电影详情数据获取失败");
        }
      });

    // this.film = this.movieid;
    // console.log(this.film, "000");
    // console.log(this.id);
    this.getScore(); // 查看是否已经评分
    // 获取用户对影片的评分
    this.scoreValue = this.scoreFlag
      ? window.localStorage.getItem("MYSCORE").replace(/[^0-9]/g, "")
      : null;

    // 想看 状态
    if (window.localStorage.getItem("MYWANTLIKE") == 1) {
      this.wantLikeFlag = 1;
      this.wantLikeMsg = "已想看";
    }

    // 绑定改变对话框状态
    bus.$on("changedialog", () => {
      // console.log(flag)
      this.scoreEvent();
    });

    // 是 特惠购票 还是 选座
    this.isXseats = this.isxseats;
    this.buybtnmsg = this.isXseats ? "查看更多电影详情" : "特惠购票";
  },

  methods: {
    // 评分
    scoreEvent() {
      this.dialogVisible = true;
    },

    //时间转换
    dateFormat(fmt, date) {
      let ret = "";
      date = new Date(date);
      const opt = {
        "Y+": date.getFullYear().toString(), // 年
        "m+": (date.getMonth() + 1).toString(), // 月
        "d+": date.getDate().toString(), // 日
        "H+": date.getHours().toString(), // 时
        "M+": date.getMinutes().toString(), // 分
        "S+": date.getSeconds().toString(), // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
          );
        }
      }
      return fmt;
    },
    // 想看
    wantLike() {
      this.wantLikeFlag = this.wantLikeFlag == 1 ? 0 : 1;
      this.wantLikeMsg = this.wantLikeFlag == 1 ? "已想看" : "想看";
      window.localStorage.setItem("MYWANTLIKE", this.wantLikeFlag);
    },

    // 评分改变
    scoreChange(val) {
      this.scoreValue = val;
    },

    // 提交评分
    submitScore() {
      this.dialogVisible = false;
    },

    // 控制 textarea 的长度
    lenControl() {
      if (this.evaluate.length > 200) this.dialogTip = "不超过200字";
      else this.dialogTip = "";
      this.evaluate =
        this.evaluate.length > 200
          ? this.evaluate.slice(0, 200)
          : this.evaluate;
    },

    // 分数组件传递分数内容
    getScore() {
      this.scoreFlag = window.localStorage.getItem("MYSCORE") ? 1 : 0;
      this.scoreMsg = window.localStorage.getItem("MYSCORE") || "评分";
    },

    // 特惠购票 / 选座购票
    toNext() {
      if (this.isXseats) {
        // 选座
        this.$router.push({ name: "FilmDetail", params: { id: this.id } });
      } else {
        // 特惠购票
        this.$router.push({ name: "Buy", params: { id: this.id } });
      }
    },
  },

  components: {
    Score,
  },
};
</script>
